<template>
	<view class="mission-context">
		<NavBar title="我的任务" />
		<ul>
			<li v-for="item,index in missionList" :key="index" @click="change(index)"><a :class="choose==index?'current':''">{{item.text}}</a></li>
		</ul>
		<TabBar/>
	</view>
</template>

<script setup>
	import NavBar from '../../../components/nav-bar'
	import TabBar from '../../../components/tab-bar.vue'
	import {ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	onLoad((options)=>{
		choose.value = JSON.parse(decodeURIComponent(options.key));
	})
	
	const choose = ref('')
	const change = (index) =>{
		choose.value = index
		
	}
	const missionList = [{
			text: '审核中'
		},
		{
			text: '审核失败'
		},
		{
			text: '进行中'
		},
		{
			text: '已完成'
		}
	]
</script>

<style lang="scss" scoped>
	.mission-context {
		background-color: #f0f0f0;
		height: 100vh;
	}
	.current{
		border-bottom: 2px #faca2a solid;
	}
	a{
		display: block;
		    width: 100%;
		    height: 44px;
		    text-align: center;
		    line-height: 44px;
		    font-size: 14px;
		    color: #404040;
			text-decoration: none;
	}
	ul{
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
	}
	li{
		width: 25%;
		background-color: white
	}
</style>